<template>
	<transition v-if='show_trans' enter-active-class='animated fadeIn detailFourMs'>
		<div class="public-attribute">
			
			<vdetail-prompt v-if='show_prompt'>
				{{prompt_text}}
			</vdetail-prompt>
			
			<vdetail-header></vdetail-header>
			
			<vdetail-live 
						:detailVurl='detailVurl' 
						:detailPoster='detailPoster'
			>
			</vdetail-live>
			
			<vdetail-user 
						:detailAvatar='detailAvatar'
						:detailUser='detailUser'
						:detailFans='detailFans'
			>
			</vdetail-user>
			
			<vdetail-title 
						@shareChange='shareChanges()'
						:detailTitle='detailTitle'
			>
			</vdetail-title>
			
			<vdetail-list 
						:RandList='RandList'
			>
			</vdetail-list>
			
			<vdetail-cts
					:showCts='vshow_cts'
					:showNotCts='vshow_notcts'
					:commentsList='vcommentsList'
			>
			</vdetail-cts>
			
			<vdetail-tools
					:ROUTERMOD='"video"'
					:ToolsId='vToolsId'
					:ToolsMod='"video_detail"'
					@ToolsChange='VideoCommentsChange'
					@toolsPrompt='toolsPrompt'
			>
			</vdetail-tools>
			
		</div>
	</transition>
</template>

<script>
	import axios from 'axios'
	import VdetailHeader from '../../common/CommonHeader'
	import VdetailLive from './components/Live'
	import VdetailUser from './components/User'
	import VdetailTitle from './components/Title'
	import VdetailList from './components/List'
	import VdetailCts from '../../common/CommonComments'
	import VdetailTools from '../../common/CommonTools'
	import VdetailPrompt from '../../common/CommonPrompt'
	export default {
		name: 'video-detail',
		components: {
			VdetailHeader,
			VdetailLive,
			VdetailUser,
			VdetailTitle,
			VdetailList,
			VdetailCts,
			VdetailTools,
			VdetailPrompt
		},
		data () {
			return {
				show_trans: false,
				detailPoster: '',
				detailVurl: '',
				detailAvatar: '',
				detailUser: '',
				detailTitle: '',
				detailFans: '',
				RandList: [],
				vToolsId: '',
				vshow_cts: false,
				vshow_notcts: true,
				vcommentsList: [],
				show_prompt: false,
				prompt_text: ''
			}
		},
		methods: {
			VideoCommentsChange (newVideo_comment) {
				this.vshow_cts = true
				this.vshow_notcts = false
				this.vcommentsList = newVideo_comment.data.data[0].list_comments.reverse()
			},
			getVideoDetailData () {
				this.vToolsId = this.$route.params.id
				axios.all([

					axios.get('/video_lists/video_detail?id=' + this.$route.params.id),

					axios.get('/video_lists/video_six')

				])
				.then(axios.spread( (video_detail, video_list)=> {

					// 上面两个请求都完成后，才执行这个回调方法
					// console.log('User', video_detail.data);
					// console.log('Repositories', video_list.data.data);
					
					if (video_detail.data.status == 0 && video_list.data.status == 0) {
						// 视频详情路由 Data
						var d_res = video_detail.data.data[0]
						var _this = this
						_this.show_trans = true
						_this.detailPoster = d_res.v_img
						_this.detailVurl = d_res.v_video_url
						_this.detailAvatar = d_res.v_avatar
						_this.detailUser = d_res.v_user
						_this.detailTitle = d_res.v_title
						_this.detailFans = d_res.v_fans
						if (d_res.list_comments.length > 0) {
							_this.vshow_cts = true
							_this.vshow_notcts = false
						}
						_this.vcommentsList = d_res.list_comments.reverse()
						// 视频详情路由随机数组  List
						_this.RandList = video_list.data.data.sort( ()=> {
							return 0.5 - Math.random()
						})
					}
				}))
			},
			toolsPrompt () {
				this.show_prompt = true
				this.prompt_text = '输入你想说的'
				setTimeout( ()=> {
					this.show_prompt = false
				},1600)
			},
			shareChanges () {
				this.show_prompt = true
				this.prompt_text = '未获取share源'
				setTimeout( ()=> {
					this.show_prompt = false
				},1600)
			}
		},
		mounted () {
			this.getVideoDetailData()
		}
	}
</script>

<style lang="stylus" scoped>
	.detail
		height:100vh
		background:#fff
</style>